<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="核对发票信息"></van-nav-bar>
    <!-- #endif -->
    <scroll-view class="check-apply" scroll-y="true" :style="styleHeight">
      <view class="check-list">
        <view class="check-list-item">
          <view class="title">发票类型</view>
          <view class="content">
            {{ data.billType }}
          </view>
        </view>
        <view class="check-list-item">
          <view class="title">发票主体</view>
          <view class="content">
            {{ data.invoiceMain }}
          </view>
        </view>
        <view class="check-list-item">
          <view class="title">发票抬头</view>
          <view class="content">
            {{ data.companyName }}
          </view>
        </view>
        <view class="check-list-item" v-if="data.ticketBody == 1">
          <view class="title">税号</view>
          <view class="content">
            {{ data.taxNumber }}
          </view>
        </view>
        <view class="check-list-item">
          <view class="title">电费金额</view>
          <view class="content">
            {{ data.powerAmount }}
          </view>
        </view>
        <view class="check-list-item">
          <view class="title">服务费金额</view>
          <view class="content">
            {{ data.serviceAmount }}
          </view>
        </view>
        <view class="check-list-item">
          <view class="title">超时占用费</view>
          <view class="content">
            {{ data.occupyAmount }}
          </view>
        </view>
        <view class="check-list-item" v-if="data.ticketBody == 1">
          <view class="title">公司地址</view>
          <view class="content">
            {{ data.address }}
          </view>
        </view>
        <!-- <view class="check-list-item">
        <view class="title">公司名称</view>
        <view class="content">
          {{ data.companyName }}
        </view>
      </view> -->
        <view class="check-list-item" v-if="data.ticketBody == 1">
          <view class="title">公司电话</view>
          <view class="content">
            {{ data.telephone }}
          </view>
        </view>

        <view class="check-list-item" v-if="data.ticketBody == 1">
          <view class="title">开户银行</view>
          <view class="content">
            {{ data.bankName }}
          </view>
        </view>
        <view class="check-list-item" v-if="data.ticketBody == 1">
          <view class="title">银行账号</view>
          <view class="content">
            {{ data.bankAccount }}
          </view>
        </view>
        <view class="check-list-item">
          <view class="title">收票人姓名</view>
          <view class="content">
            {{ data.recipientName }}
          </view>
        </view>
        <view class="check-list-item">
          <view class="title">收票人手机</view>
          <view class="content">
            {{ data.recipientTelephone }}
          </view>
        </view>
        <view class="check-list-item">
          <view class="title">收票人地址</view>
          <view class="content">
            {{ data.recipientAddress }}
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="bottom-wrap" :style="styleBottom">
      <button class="bnt-wrap bnt-pay" @tap="next">确认提交</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { getSystemInfo, setToastInstance, systemInfo } from '@mixins/info';
import { applyTicket } from '@/service/apis/mine';
import { getItem } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const styleBottom = `height: calc(124rpx + ${getSystemInfo().safeBottom}px)`;
let styleHeight = ref(`height: calc(100vh - ( 124rpx + ${getSystemInfo().safeBottom}px))`);
// #ifdef H5
styleHeight.value = `height: calc(100vh - ( 124rpx + ${getSystemInfo().safeBottom}px) - ${
  getSystemInfo().navHeight
}px)`;
// #endif

console.log('styleHeight====', styleHeight);

let data = reactive({
  billType: '',
  invoiceMain: '',
  companyName: '',
  taxNumber: '',
  powerAmount: '',
  serviceAmount: '',
  bankName: '',
  bankAccount: '',
  address: '',
  recipientName: '',
  telephone: '',
  recipientTelephone: '',
  recipientAddress: '',
  ticketBody: null,
  invoiceData: {} as any,
  orderIds: [] as any,
  occupyAmount: '',
  power: '',
});

onLoad((option: any) => {
  let invoiceData = JSON.parse(option.data);
  data.invoiceData = JSON.parse(option.data);
  console.log('invoiceData=====', data.invoiceData);
  console.log('invoiceData=====', invoiceData);
  console.log('invoiceData==12222===', invoiceData.ticketBody);
  data.orderIds = invoiceData.orderId.split(',');
  data.billType = invoiceData.ticketType == 0 ? '增值税普通发票' : '增值税专用发票';
  data.ticketBody = invoiceData.ticketBody;
  data.invoiceMain = invoiceData.ticketBody == 0 ? '个人/非企业单位' : '企业单位';
  data.companyName = invoiceData.companyName;
  data.taxNumber = invoiceData.taxNumber;
  data.powerAmount = invoiceData.powerAmount;
  data.serviceAmount = invoiceData.serviceAmount;
  data.occupyAmount = invoiceData.occupyAmount;
  data.power = invoiceData.power ? invoiceData.power : 0;
  data.bankName = invoiceData.bankName;
  data.bankAccount = invoiceData.bankAccount;
  data.address = invoiceData.address;
  data.recipientName = invoiceData.recipientName;
  data.telephone = invoiceData.telephone;
  data.recipientTelephone = invoiceData.recipientTelephone;
  data.recipientAddress = invoiceData.recipientAddress;
  console.log(data.orderIds);
  console.log(data.power);
});

const next = () => {
  delete data.invoiceData.list;
  delete data.invoiceData.type2;
  delete data.invoiceData.type;
  delete data.invoiceData.canTicket;
  delete data.invoiceData.isShow;
  data.invoiceData.power = data.power;
  applyTicket(
    { dto: data.invoiceData, orderIds: data.orderIds },
    { account: { accountId: getItem('userid') } }
  ).then((res: any) => {
    console.log(res);
    uni.navigateTo({
      url: `/pagesMyCenter/myBilling/applyInvoiceStepThree`,
    });
  });
};
// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.check-apply {
  .check-list {
    padding: 0 16px;

    .check-list-item {
      padding: 16px 0;
      border-bottom: 1px solid #f2f2f2;
      display: flex;

      .title {
        width: 30%;
        font-weight: 500;
        font-size: 16px;
        color: #242424;
      }

      .content {
        width: 70%;
        font-size: 14px;
        color: #545454;
      }
    }
  }
}

.bottom-wrap {
  position: fixed;
  width: 100vw;
  bottom: 0;
  background-color: #fff;
  z-index: 999;

  .bnt-pay {
    margin: 9px 0 9px 16px;
    width: 343px;
    height: 44px;
    border-radius: 50px;
  }
}
</style>
